<script setup>
import { ref } from 'vue'
import GoodsCard from '../goods/components/GoodsCard.vue'
import SingleButton from '@/components/SingleButton.vue'
import { useGoodsStore } from '@/stores'

const goodsStore = useGoodsStore()

const filterGoodsList = ref([])
const active = ref(goodsStore.typesList[0].id)

const filterGoods = index => {
  active.value = index
  if (index === goodsStore.typesList[0].id) {
    return (filterGoodsList.value = goodsStore.goodsList)
  }
  filterGoodsList.value = goodsStore.goodsList.filter(
    goods => goods.type === goodsStore.typesList[index].type
  )
}
filterGoods(goodsStore.typesList[0].id)
</script>

<template>
  <div class="home">
    <div class="filter">
      <SingleButton
        v-for="(item, index) in goodsStore.typesList"
        :key="item.id"
        :class="{ active: active === goodsStore.typesList[index].id }"
        @click="filterGoods(index)"
        :filter="goodsStore.typesList[index].type"
      />
    </div>
    <div class="goods-list" v-if="filterGoodsList.length">
      <GoodsCard v-for="goods in filterGoodsList" :key="goods.id" :goods />
    </div>
    <div class="tip" v-else>没有该类型的商品</div>
  </div>
</template>

<style scoped lang="scss">
.home {
  .filter {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 20px 20px 0;
    transition: all 0.3s ease;

    .active {
      background-color: var(--btn-hover-color);
    }
  }

  .goods-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, 300px);
    justify-content: center;
    gap: 10px;
    padding: 20px;
  }

  .tip {
    width: 100%;
    text-align: center;
    font-size: 20px;
    margin-top: 100px;
  }
}
</style>
